<!-- 轮播图 -->
<template>
  <div class="Carousel-container">
    <div class="main">
      <div class="subject" ref="subjectElementRef">
        <slot></slot>
      </div>
      <div
        class="left-arrow"
        @click="switchCarousel(-1)"
        v-show="indexRef !== 1"
      >
        <Icon type="CarouselArrow"></Icon>
      </div>
      <div
        class="rigth-arrow"
        @click="switchCarousel(1)"
        v-show="indexRef !== props.num"
      >
        <Icon type="CarouselArrow"></Icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import Icon from "@/components/Icon/index.vue";
import { ref } from "vue";
const props = defineProps({
  num: {
    type: Number,
    required: true,
  },
});

const subjectElementRef = ref(null);
const indexRef = ref(1); // 第几章
function switchCarousel(i) {
  indexRef.value = indexRef.value + i;
  if (indexRef.value < 1) {
    return;
  }
  if (indexRef.value > props.num) {
    return;
  }
  subjectElementRef.value.style.marginLeft =
    -(subjectElementRef.value.clientWidth * (indexRef.value - 1)) + "px";
}
</script>

<style lang="less" scoped>
.Carousel-container {
  width: 100%;
  height: 100%;
  .main {
    width: 350px;
    margin: 5px auto;
    position: relative;
    overflow: hidden;
    .subject {
      transition: all 0.5s ease-in-out;
      width: 100%;
    }

    .left-arrow,
    .rigth-arrow {
      position: absolute;
    }
    .left-arrow {
      cursor: pointer;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      transform: rotateY(180deg);
    }
    .rigth-arrow {
      cursor: pointer;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>